<template>
    <a-select
        v-model="selectValue"
        :loading="loading"
        @search="handleSearch"
        @clear="handleSearch('')"
        :allow-clear="true"
        :allow-search="true"
        :filter-option="false"
        :options="options"
        v-bind="$attrs"
    />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { SelectOptionData } from '@arco-design/web-vue'

const { query } = defineProps<{
    query?: (searchValue) => Promise<SelectOptionData[]>
}>()

const selectValue = defineModel<
    | string
    | number
    | boolean
    | Record<string, any>
    | (string | number | boolean | Record<string, any>)[]
>({ default: '' })
const options = ref<SelectOptionData[]>([])
const loading = ref(false)

const handleSearch = async searchValue => {
    try {
        loading.value = true
        const data = await query?.(searchValue)
        // @ts-ignore
        options.value = data
    } finally {
        loading.value = false
    }
}

handleSearch('')
</script>
